import React from 'react';
import {StyleSheet, View, Text, Button, TouchableOpacity} from 'react-native';
/*导入react-navigation后需要安装react-navigation-stack*/
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
class homeScreen extends React.Component {
  static navigationOptions = {
    title: '首页',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff'
  };
  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: 'cyan',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text>首页</Text>
        <Button
          title="跳转到详情页"
          onPress={() =>
            this.props.navigation.navigate('Detail', {
              newsId: 'lk001',
              newsName: '撩课1号文件'
            })
          }
        />
        <TouchableOpacity style={styles.buttonSty}>
          <Text style={styles.btnText} onPress={() => alert('确定')}>
            确定
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

class DetailScreen extends React.Component {
  render() {
    const {navigation} = this.props;
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: 'red',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text>详情</Text>
        <Button
          title="回到首2页"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Text>参数1：{JSON.stringify(navigation.getParam('newsId', '无参数时显示这个'))}</Text>
      </View>
    );
  }
  componentDidMount() {
    console.log(JSON.stringify(this.props.navigation.getParam('newsId')), '哈哈')
  }
}
// const AppNavigator = createStackNavigator({
//   home: {
//     screen: homeScreen,
//   },
// });
const RootStack = createStackNavigator({
  Home: homeScreen,
  Detail: DetailScreen,
});
const AppContainer = createAppContainer(RootStack);

const styles = StyleSheet.create({
  buttonSty: {
    height: 40,
    width: 100,
    borderRadius: 20,
    backgroundColor: 'green',
    justifyContent: 'center',
  },
  btnText: {
    textAlign: 'center',
    color: 'white',
  },
});
export default AppContainer;
